Заключване за активиране на екрана във Frontend: Предотвратяване на заспиването на екрана за по-добро потребителско изживяване

В днешния дигитален свят потребителите взаимодействат с уеб приложения и мобилни преживявания през широк набор от устройства и операционни системи. Критичен аспект на осигуряването на положително потребителско изживяване е гарантирането, че екранът на устройството остава активен, когато е необходимо. API за заключване за активиране на екрана (Screen Wake Lock API) предлага мощно решение, което позволява на разработчиците да предотвратят затъмняването или заключването на екрана на устройството, като по този начин подобряват използваемостта и ангажираността за потребители по целия свят.

Разбиране на проблема: Заспиване на екрана и неговото въздействие

Представете си потребител в Токио, Япония, който гледа дълъг видео урок на своя таблет, докато учи ново умение. Или може би лекар в Сао Пауло, Бразилия, преглежда медицински досиета на мобилно устройство по време на консултация. Ако екранът на устройството затъмнее или се заключи по средата на сесията, това може да наруши потребителското изживяване, да причини разочарование и потенциално да доведе до загуба на ангажираност. Този проблем е особено изразен в приложения като:

• Видео плейъри: Непрекъснатото възпроизвеждане на видео изисква екранът да остане активен.
• Платформи за електронно обучение: Поддържането на видимостта на екрана е от съществено значение по време на уроци и тестове.
• Навигационни приложения: Поддържането на екрана включен по време на навигация е от решаващо значение за безопасността и лекотата на използване.
• Медицински приложения: Лекари и медицински сестри се нуждаят от видими екрани при преглед на информация за пациенти или по време на процедури.
• Интерактивни игри: Продължителната игра изисква екранът да остане включен.

Поведението по подразбиране на повечето устройства включва затъмняване на екрана след период на неактивност за пестене на живота на батерията. Въпреки че това често е желателно, то се превръща в пречка за използваемостта при специфични приложения. API за заключване за активиране на екрана предоставя на разработчиците средства за отмяна на това поведение по подразбиране, като гарантира, че екранът остава активен, когато е необходимо.

Представяне на API за заключване за активиране на екрана

API за заключване за активиране на екрана е уеб API, което предоставя механизъм за уеб приложенията да предотвратят затъмняването или заключването на екрана на устройството. То е проектирано като решение, съобразено с поверителността и удобно за потребителя, което позволява на разработчиците да изискват заключване за активиране на екрана само когато е наистина необходимо. API е изграден на принципа на потребителско съгласие и е внедрен в повечето съвременни браузъри, включително Chrome, Firefox и Edge.

Ключови концепции

• `navigator.wakeLock`: Това свойство осигурява достъп до API за заключване за активиране на екрана.
• `request()`: Този метод се използва за изискване на заключване за активиране на екрана. Той приема тип заключване за активиране като аргумент (понастоящем се поддържа само 'screen').
• `release()`: Този метод освобождава предишно придобито заключване за активиране на екрана.
• Типове заключване за активиране (Wake Lock Types): API поддържа различни типове заключвания за активиране. Понастоящем единственият поддържан тип е 'screen'. В бъдеще API потенциално би могъл да поддържа други типове, като заключвания за активиране на процесора (CPU wake locks) или заключвания за активиране на устройството (device wake locks).

Внедряване на API за заключване за активиране на екрана

Внедряването на API за заключване за активиране на екрана включва няколко лесни стъпки. Нека разгледаме ключовите етапи с примерен код за илюстриране на процеса.

1. Проверка за поддръжка на API

Преди да се опитате да използвате API, е от решаващо значение да проверите дали браузърът на потребителя го поддържа. Това може да се постигне чрез проверка за съществуването на свойството `navigator.wakeLock`:

            if ('wakeLock' in navigator) {
  // Screen Wake Lock API is supported
  console.log('Screen Wake Lock API supported!');
} else {
  // Screen Wake Lock API is not supported
  console.log('Screen Wake Lock API not supported.');
}

            

              
                Copy
              
            
          

2. Изискване на заключване за активиране на екрана

Ядрото на имплементацията включва изискване на заключване за активиране на екрана с помощта на метода `request()`. Този метод връща Promise, който се разрешава с обект `WakeLockSentinel`, ако заявката е успешна. Обектът `WakeLockSentinel` предоставя информация за заключването за активиране и позволява неговото освобождаване.

Ето как да поискате заключване за активиране на екрана:

            
let wakeLock = null;

async function requestWakeLock() {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Screen Wake Lock acquired!');
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released!');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
    // Handle the error, e.g., show an error message to the user.
  }
}

            

              
                Copy
              
            
          

В този код:

• Дефинираме променлива `wakeLock`, за да държим обекта `WakeLockSentinel`.
• Използваме `async` функция `requestWakeLock()`, за да обработим асинхронния характер на API.
• Извикваме `navigator.wakeLock.request('screen')`, за да изискаме заключване за активиране на екрана.
• Ако заявката е успешна, записваме съобщение в конзолата.
• Прикачваме слушател на събитие `release` към обекта `wakeLock`, за да открием кога заключването за активиране е освободено (напр. поради затваряне на раздела или навигиране на потребителя извън страницата).
• Включваме обработка на грешки за грациозно управление на потенциални неуспехи, като проблеми с разрешенията или липса на поддръжка.

3. Освобождаване на заключването за активиране на екрана

От съществено значение е да освободите заключването за активиране на екрана, когато вече не е необходимо. Това може да стане с помощта на метода `release()` на обекта `WakeLockSentinel`. Това е особено важно за запазване на живота на батерията и зачитане на настройките на устройството на потребителя.

Ето как да освободите заключването за активиране на екрана:

            
function releaseWakeLock() {
  if (wakeLock) {
    wakeLock.release().then(() => {
      console.log('Screen Wake Lock released!');
      wakeLock = null;
    });
  }
}

            

              
                Copy
              
            
          

В този код:

• Проверяваме дали съществува заключване за активиране.
• Извикваме `wakeLock.release()`, за да освободим заключването. Методът `release()` връща `Promise`, който се разрешава, когато заключването е освободено.
• Записваме съобщение в конзолата, за да покажем освобождаването.
• Задаваме `wakeLock` на `null`, за да покажем, че заключването е освободено.

Функцията `releaseWakeLock()` трябва да бъде извикана, когато приложението вече не изисква екранът да остане включен. Това може да бъде предизвикано от:

• Потребителят затваря раздела или навигира извън страницата.
• Приложението приключва задача, която е изисквала екранът да е активен (напр. приключване на възпроизвеждане на видео).
• Потребителят изрично изисква да освободи заключването за активиране (напр. чрез бутон).

4. Интегриране с логиката на приложението

Внедряването трябва да бъде интегрирано в специфичната логика на приложението. Например, във видео плейър можете да поискате заключването за активиране, когато видеото започне да се възпроизвежда, и да го освободите, когато видеото е на пауза или приключи. В платформа за електронно обучение можете да поискате заключването за активиране по време на урок и да го освободите, когато потребителят навигира до друг раздел. Времето за изискване и освобождаване на заключването за активиране е от решаващо значение за доброто потребителско изживяване.

Ето хипотетичен пример за интегрирането му във видео плейър:

            
const videoElement = document.getElementById('myVideo');
const playButton = document.getElementById('playButton');
const pauseButton = document.getElementById('pauseButton');

let wakeLock = null;

async function requestWakeLock() {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Screen Wake Lock acquired!');
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released!');
      wakeLock = null;
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
}

function releaseWakeLock() {
  if (wakeLock) {
    wakeLock.release().then(() => {
      console.log('Screen Wake Lock released!');
      wakeLock = null;
    });
  }
}

playButton.addEventListener('click', () => {
  videoElement.play();
  requestWakeLock();
});

pauseButton.addEventListener('click', () => {
  videoElement.pause();
  releaseWakeLock();
});

videoElement.addEventListener('ended', () => {
  releaseWakeLock();
});

            

              
                Copy
              
            
          

В този пример за видео плейър:

• Заключването за активиране се изисква, когато видеото започне да се възпроизвежда (`playButton.addEventListener`).
• Заключването за активиране се освобождава, когато видеото е на пауза (`pauseButton.addEventListener`).
• Заключването за активиране също се освобождава, когато видеото приключи (`videoElement.addEventListener('ended')`).

Най-добри практики и съображения

Ефективното внедряване на API за заключване за активиране на екрана включва спазване на най-добрите практики за осигуряване на положително и зачитащо поверителността потребителско изживяване. Ето някои ключови съображения:

1. Потребителско съгласие и прозрачност

Винаги бъдете прозрачни с потребителите относно това защо използвате API за заключване за активиране на екрана. Ясно съобщавайте причината за предотвратяване на заспиването на екрана. Помислете за предоставяне на превключвател или настройка, която позволява на потребителите да контролират дали заключването за активиране на екрана е активно. Това дава на потребителите свобода на действие и контрол върху поведението на тяхното устройство. В юрисдикции по целия свят зачитането на потребителското съгласие е все по-важно в законодателството за поверителност на данните.

2. Контекстуална употреба

Изисквайте заключването за активиране на екрана само когато е наистина необходимо. Избягвайте да го използвате безразборно, тъй като това може да повлияе негативно на живота на батерията и да дразни потребителите. Разгледайте контекста на дейността на потребителя. Например, ако потребител чете статия в приложение за новини, заключване за активиране на екрана може да не е необходимо, но ако гледа видео, вградено в статията, може да е уместно.

3. Правилно освобождаване

Уверете се, че заключването за активиране на екрана винаги се освобождава, когато вече не е необходимо. Това е от решаващо значение за запазване на живота на батерията и зачитане на потребителските предпочитания. Използвайте слушатели на събития (напр. `visibilitychange`, `beforeunload`, `pagehide`), за да откриете кога потребителят навигира извън страницата или затваря раздела и освободете заключването за активиране съответно.

4. Обработка на грешки

Внедрете стабилна обработка на грешки, за да управлявате грациозно потенциални проблеми, като грешки в разрешенията или несъвместимости на браузъра. Информирайте потребителя, ако заявката за заключване за активиране на екрана е неуспешна и предоставете алтернативни опции, ако е необходимо. Предоставянето на полезни съобщения за грешки на различни езици би било от полза за глобалната аудитория.

5. Разход на батерия

Имайте предвид разхода на батерия. Докато API за заключване за активиране на екрана е проектирано да бъде енергийно ефективно, поддържането на екрана непрекъснато включен неизбежно ще изтощи батерията по-бързо, отколкото ако позволите на устройството да заспи. Проектирайте приложението си да бъде ефективно по други начини, като оптимизиране на възпроизвеждането на видео и намаляване на използването на процесора, за да минимизирате цялостното въздействие върху живота на батерията.

6. Съображения за достъпност

Помислете за потребители с увреждания. Уверете се, че вашето внедряване е достъпно за потребители с различни нужди. Например, предоставете алтернативни начини за потребителите да контролират заключването за активиране на екрана, ако имат затруднения при използването на стандартните контроли. Тествайте приложението си с екранни четци и други помощни технологии, за да осигурите съвместимост. Спазването на Указанията за достъпност до уеб съдържание (WCAG) е от съществено значение за глобалната използваемост.

7. Тестване на различни устройства и браузъри

Тествайте вашето внедряване на различни устройства и браузъри, за да осигурите съвместимост и последователно поведение. Различните устройства и браузъри може да имат различни стратегии за управление на захранването и поведение на екрана. Тестването между браузъри е от решаващо значение за достигане до световна аудитория. Най-добрият подход включва тестване на различни платформи и операционни системи, включително Android, iOS, Windows, macOS и Linux.

8. Откриване на функции

Винаги използвайте откриване на функции, за да проверите наличността на API за заключване за активиране на екрана, преди да се опитате да го използвате. Това гарантира, че вашето приложение грациозно се деградира и не се срива, ако API не се поддържа от браузъра на потребителя.

Примери от реалния свят и глобални приложения

API за заключване за активиране на екрана има множество приложения в различни индустрии и случаи на употреба. Ето няколко примера, които илюстрират неговата практическа значимост:

• Здравеопазване: Медицински специалисти в болници и клиники в различни страни, като Индия и Нигерия, могат да използват този API, за да поддържат системите за наблюдение на пациенти или интерфейсите на медицински устройства видими по време на процедури.
• Образование: Платформи за онлайн обучение, като тези, използвани от студенти в Канада или Австралия, могат да гарантират, че екранът остава активен по време на интерактивни уроци, тестове и видео лекции.
• Производство: Фабрични работници в Германия или Япония могат да използват този API, за да поддържат таблата за наблюдение на производството видими на таблети или други устройства, предотвратявайки прекъсвания на производството.
• Транспорт: Шофьори на камиони в Съединените щати или персонал за доставки в Бразилия могат да поддържат навигационни приложения активни на своите устройства.
• Фитнес: Потребители във Франция или Южна Корея могат да използват този API за фитнес тракери по време на тренировки.
• Интерактивни павилиони: Интерактивни павилиони на обществени места в страни като Обединеното кралство или Китай ще поддържат екраните си активни, за да ангажират потребителите.

Предимства и недостатъци

Предимства

• Подобрено потребителско изживяване: Осигурява безпроблемно изживяване, като предотвратява затъмняването или заключването на екрана.
• Подобрена използваемост: Прави приложенията по-използваеми в ситуации, когато екранът трябва да остане активен.
• Съвместимост между платформи: Работи на различни браузъри и устройства.
• Фокус върху поверителността: Проектиран с мисъл за поверителността на потребителите и изисква потребителско съгласие.

Недостатъци

• Изтощаване на батерията: Поддържането на екрана включен може да изтощи батерията по-бързо.
• Раздразняване на потребителя: Може да дразни потребителите, ако се използва неподходящо или без прозрачност.
• Поддръжка на браузъра: Изисква поддръжка на браузъра (въпреки че е широко достъпна в съвременните браузъри).
• Потенциални проблеми с разрешенията: Може да подлежи на заявки за разрешения на някои платформи.

Алтернативи и съображения

Докато API за заключване за активиране на екрана предоставя директно решение, има алтернативни подходи и съображения, които разработчиците биха могли да проучат.

1. `setInterval()` и периодични актуализации

Преди въвеждането на API за заключване за активиране на екрана, някои разработчици използваха `setInterval()`, за да актуализират периодично съдържание или да изпращат сигнал до сървъра, предотвратявайки влизането на устройството в режим на заспиване. Въпреки това, този подход може да бъде по-малко надежден и по-ресурсоемък. Той може също да бъде възприет като заобиколно решение, а не като добре дефинирано такова.

2. `requestFullscreen()` и потапящи преживявания

За приложения, които включват режим на цял екран, API `requestFullscreen()` може индиректно да предотврати заспиването на екрана на някои устройства. Въпреки това, това не е гарантирано поведение и може да варира в зависимост от устройството и браузъра. Той се фокусира предимно върху дисплея на цял екран, а не върху управлението на поведението на заспиване на екрана.

3. Настройки на ниво операционна система

Потребителите обикновено могат да коригират настройките за изчакване на екрана на своето устройство в рамките на операционната система (напр. Windows, macOS, Android, iOS). Разработчиците трябва да информират потребителите, че поведението на заспиване на екрана се управлява от настройките на устройството. В идеалния случай разработчиците трябва да използват API и да оставят потребителя да реши дали да активира/деактивира заключването на екрана, като предоставят превключвател или настройка.

4. API за управление на захранването (Бъдещи насоки)

API за заключване за активиране на екрана все още се развива. Бъдещите подобрения биха могли да включват по-детайлен контрол върху поведението на екрана, като например възможност за контрол на нивото на яркост или затъмняване. API би могъл да се интегрира с други API за управление на захранването, като API, които биха могли да наблюдават и реагират на енергийното състояние на устройството, за да създадат по-оптимизирани потребителски преживявания.

Достъпност и интернационализация

За глобална аудитория осигуряването на достъпност и интернационализация (i18n) е от първостепенно значение. Самият API за заключване за активиране на екрана не влияе пряко върху достъпността или интернационализацията. Въпреки това, начинът, по който интегрирате този API във вашето приложение, има пряко въздействие.

Съображения за достъпност

• Навигация с клавиатура: Уверете се, че всички контроли (напр. бутони, квадратчета за отметка) са достъпни чрез клавиатурата.
• Екранни четци: Проверете дали помощните технологии, като екранни четци, предоставят точна информация за текущото състояние на приложението. Събитието `release` трябва да бъде обявено от екранния четец.
• Цветен контраст: Следвайте указанията на WCAG, за да осигурите достатъчен контраст между текст и фон за по-добра четимост.
• Алтернативен текст: Използвайте подходящ алтернативен текст за всички изображения и графики.
• Правилни ARIA атрибути: Използвайте ARIA атрибути (напр. `aria-label`, `aria-describedby`), за да предоставите допълнителна информация на помощните технологии.

Съображения за интернационализация

• Превод: Преведете всички текстови и потребителски елементи на езиците, поддържани от вашето приложение. Използвайте стабилна библиотека за превод и осигурете правилно кодиране на символи (UTF-8).
• Форматиране на дата и час: Форматирайте дати и часове според регионалните настройки на потребителя. Използвайте библиотеки като `Intl` за форматиране на дата/час.
• Форматиране на числа: Форматирайте числата, включително валутата, според регионалните настройки на потребителя.
• Поддръжка отдясно наляво (RTL): Ако поддържате езици, които се пишат отдясно наляво (напр. арабски, иврит), уверете се, че оформлението на вашето приложение е адаптирано правилно.
• Валута Форматиране: Обработвайте символите и форматирането на валутата по подходящ начин въз основа на региона на потребителя.

Заключение: Подобряване на потребителското изживяване в световен мащаб

API за заключване за активиране на екрана предлага ценен инструмент за frontend разработчиците, които се стремят да подобрят потребителските преживявания в различни уеб приложения и мобилни среди. Като разбирате възможностите на API, следвате най-добрите практики и го интегрирате обмислено във вашите проекти, можете да създадете по-ангажиращи, лесни за ползване и глобално достъпни приложения.

Чрез проактивно адресиране на поведението на заспиване на екрана, можете да предотвратите прекъсвания и да подобрите цялостното потребителско изживяване, независимо дали вашите потребители са в Лондон, Пекин или Лагос. Не забравяйте винаги да давате приоритет на потребителското съгласие, да осигурявате прозрачност и да освобождавате заключването за активиране на екрана своевременно, когато вече не е необходимо, за да осигурите уважителен и отговорен подход.

Тъй като уеб технологиите продължават да се развиват, API за заключване за активиране на екрана вероятно ще стане още по-критичен за изграждането на модерни уеб приложения, които могат да предоставят безпроблемни, ангажиращи и глобално достъпни преживявания за потребителите навсякъде. Прегърнете силата на този API и изградете по-добри уеб преживявания за вашите потребители по целия свят!